<template>
  <view>
    <view class="addr-selector">
      <view class="addr-selector-wrapper" @click="handleSelectAddr">
        <view class="title">
          <ai-icon type="icon-position" color="#ffc233"></ai-icon>
          <text class="text">目的地</text>
        </view>
        <view class="search">
          <ai-icon type="icon-search" color="var(--gray-3)" v-if="!hasTarget"></ai-icon>
          <text class="text">{{targetText}}</text>
        </view>
      </view>
    </view>
    
    <view class="card-selector">
      <view class="card-item" v-for="(cat,idx) in catList" :key="cat.value" @click="handCatChange(cat.value)">
        <ai-icon :size="28" :type="cat.value" color="var(--brand-2)"></ai-icon>
        <text class="text">{{cat.label}}</text>
      </view>
    </view>

    <ai-section title="行程规划" :bg-transparent="true" type="line"></ai-section>
    <tp-art-item-list
      :plans="plans"
      :more="false"
      more-text="更多规划"
      @loadMore="queryPlans"
      @agree="handleAgree"
      @collect="handleCollect"></tp-art-item-list>

    <tp-footer></tp-footer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        catList: [],
        plans: [],
        more: true,
        page: 1,
        size: 5,
        cat: '',
        lastCity: ''
      };
    },
    computed: {
      targetText() {
        let chatCity = this.$store.state.address.planCity
        return chatCity ? chatCity : '选择目的地'
      },
      hasTarget() {
        let chatCity = this.$store.state.address.planCity
        return chatCity
      }
    },
    onLoad() {
      this.resetPage()
      this.queryPlans()
      this.loadCat()
    },
    onShow() {
      uni.$on("handClickAddress", res => {
        console.log("#####", res);
        // 清除监听
        uni.$off('handClickAddress');
        
        let curCity = res.city
        if (this.lastCity == curCity) {
          return;
        }
        this.lastCity = res.city
        this.resetPage()
        this.queryPlans()
      })
    },
    onReachBottom() {
      if (this.more) {
        this.queryPlans()
      }
    },
    methods: {
      handleSelectAddr() {
        uni.navigateTo({
          url:"/pages/search/address?origin=plan"
        })
      },
      loadCat() {
        let url = this.$urls.getApi("catOptions")
        this.$get(url).then(res => {
          let options = res.module
          this.catList.splice(0, this.catList.length, ...options)
        })
      },
      handCatChange(cat) {
        this.cat = cat
        this.resetPage()
        this.queryPlans()
      },
      resetPage() {
        this.more = true
        this.page = 1
        this.plans.splice(0, this.plans.length)
      },
      queryPlans() {
        let url = this.$urls.getApi("searchPlans")
        let page = this.page
        let size = this.size;
        this.$get(url, {
          data: {
            page, size,
            city: this.$store.state.address.planCity,
            cat: this.cat
          }
        }).then(res => {
          let plans = res.module || []
          this.more = plans.length >= size
          if (this.more) {
            this.page = page + 1;
          }
          if (plans) {
            this.plans.push(...plans)
          }
        })
      },
      handleAgree(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("agreePlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.agreeCnt = count
          plan.agreed = active
        })
      },
      handleCollect(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("collectPlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.collectCnt = count
          plan.collected = active
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .addr-selector {
    box-sizing: border-box;
    padding: 6px $gutter $gutter $gutter;
    background-color: var(--white);

    .addr-selector-wrapper {
      position: relative;
      display: flex;
      background: linear-gradient(90deg, var(--gray-8), var(--white));
      border: 1px solid var(--gray-8);
      height: 32px;
      line-height: 32px;
      border-radius: 16px;
      padding: 0 $gutter;

      .title {
        font-size: $font-size-md;
        border-right: 2px solid var(--white);

        .text {
          color: var(--gray-2);
          padding: 0 12px 0 6px
        }
      }

      .search {
        font-size: $font-size-md;
        padding-left: $gutter;

        .text {
          color: var(--gray-2);
          padding: 0 12px 0 6px
        }
      }
    }
  }

  .card-selector {
    padding: $gutter;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    .card-item {
      height: 78px;
      width: 24%;
      border-left: 2px solid var(--white);
      border-bottom: 2px solid var(--white);
      background-color: $brand-3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: $font-size-sm;
      

      .text {
        padding-top: 3px;
        color: var(--gray-2);
      }

      &:nth-child(4n+1) {
        border-left-color: transparent;
      }
      &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) {
        border-bottom-color: transparent;
      }
    }
  }
</style>